<template>
	<el-dialog title="在线报告" :visible.sync="visible" width="1000px" height="450px" :center="false">
		<div slot="title" class="dialog-header-title">
			<!-- <i class="el-icon-upload" style="color: #FFF"></i>&nbsp; -->
			<span style="color: #FFF">在线报告</span>
		</div>
	
		<div class="smp-result smp_panel1">
			<div class="smp_panel_body"  style="padding: 0;height:500px;overflow-y: scroll;">
				<div class="article artice1"  id="artice1" ref="pdfContent">
					<!-- vue展示markdown内容,v-highlight自定义指令 -->
					<div v-highlight v-html="responseBody" class="markdown-body" id="content"></div>
				</div>

			</div>
		</div> 
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false" size="mini">关 闭</el-button>
			<el-button @click="print" size="mini" type="primary"  >导出word</el-button>
			<!-- <el-button @click="printpdf" size="mini" type="primary" >导出pdf</el-button> -->
		</span>
	</el-dialog>
</template>
<script>
	import {
		report,doc
	} from '@/api/report.js';
	import html2canvas from 'html2canvas';
	import jsPDF from 'jspdf';
	export default {
		data() {
			return {
				query: {},
				responseData: "",
				visible: false
			}

		},
		directives: {
			watermark: {
				bind(el, binding) {
					const watermarkText = "金农云易通";
					const canvas = document.createElement('canvas');
					const ctx = canvas.getContext('2d');
					canvas.width =94;
					canvas.height =90;
					ctx.fillStyle = 'rgba(180, 180, 180, 0.2)';
					ctx.textAlign = 'center';
					ctx.textBaseline = 'middle';
					ctx.rotate(-25* Math.PI/180);
					ctx.font = '11px Arial';
					ctx.fillText(watermarkText,25,40 );

					const base64 = canvas.toDataURL('image/png');
					
					const watermarkDiv = document.createElement('div');
					watermarkDiv.style.position = 'absolute';
					watermarkDiv.style.top = '-20px';
					watermarkDiv.style.left = '-20px';
					watermarkDiv.style.width = '110%';
					watermarkDiv.style.height = '110%';
					watermarkDiv.style.backgroundImage = `url('${base64}')`;
					watermarkDiv.style.pointerEvents = 'none'; // 确保水印不会阻挡鼠标事件
					el.style.position = 'relative';
					el.appendChild(watermarkDiv);
				}
			}
		},


		methods: {
			ShowDialog(row) {

				Object.assign(this.query, row)
				this.query = row;
				this.report();
			},
			mounted() {

			},

			report() {
				
				report(this.query).then(res => {
					this.responseBody = this.$marked(res.data.extend);
					this.visible = true;
				})
			},
			print() {
				const loading = this.$loading({
					lock: true,
					text: '报告生成中，请稍后',
					spinner: 'el-icon-loading'
				})
				doc(this.query).then(res => {
							
					let name = this.query.qmsNo +"_" +this.query.qmsName+'需求报告.doc';
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: this.query.qmsNo +"_" +this.query.qmsName+'需求报告.doc', // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download', name);
							
					if (typeof aLink.download === 'undefined') {
						aLink.setAttribute('target', '_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
					loading.close();
				})
				
				
				
				
				//this.printpdf();
				
			},
			
			printpdf() {
				const loading = this.$loading({
					lock: true,
					text: '报告生成中，请稍后',
					spinner: 'el-icon-loading'
				})
				this.printpdf1();
				loading.close();
			},
			
			async printpdf1() {
							const content = this.$refs.pdfContent;
							const canvas = await html2canvas(content,{
								scale:2.5,
								dpi:window.devicePixelRatio * 4
							});
							const imgData = canvas.toDataURL('image/png');
							const doc = new jsPDF({
								orientation: 'portrait',
								unit: 'pt',
								format: 'a4',
							});
							const imgProps = doc.getImageProperties(imgData);
							const pdfWidth = doc.internal.pageSize.getWidth();
							const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
							//doc.from(content);
							doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
							doc.save(this.query.qmsName+'需求报告.pdf');
						},
			
		}
	}
</script>


<style>
	.artice1{
		/* user-select: none; */
		padding:15px;
		
	}

	.artice1 table {
		width: 100%;
		border: 1px solid #f2f2f2;
	}

	.artice1 table,
	.article th,
	.article td {
		border-collapse: collapse;
	}

	.artice1 thead tr {
		background-color: #f2f2f2;
		border-collapse: separate;
		border: 1px solid #EBEEF5;
	}

	.artice1 tbody tr {

		border-collapse: separate;
		border: 1px solid #EBEEF5;
	}

	.artice1 tbody tr:nth-child(even) {
		background-color: #FBFBFB;
		;
	}

	.artice1 tbody tr:nth-child(odd) {
		background-color: #FFF;
	}

	.artice1 thead th,
	.artice1 tbody td {
		padding: 6px;
	}
</style>
